<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="input">
</body>
<script>
  let demo = {
    name: 'harry'
  }

  let chaoChao = ''


  Object.defineProperty(demo, 'name', {
    set(val) {
      console.log('数据被改变');
      console.log('修改之后的值是', val);
      document.querySelector('#input').value = val
      chaoChao = val
    },
    get() {
      console.log('数据被调用');
      return chaoChao
    }

  })
  document.querySelector('#input').addEventListener('input', (e) => {
    demo.name = e.target.value
  })
</script>

</html>